<template>
	<view class="mine padding">
		<view class="mine_info margin-top-xs" @click="gotouserinfo" style="padding-top: 100rpx;">
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round lg">
						<image :src="myUserLits.image_url" mode="" style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
					</view>
					<view class="content">
						<view class="text-grey">
							<view class="text-cut">{{myUserLits.nickname}}</view>
							<view class="cu-tag round bg-green sm">LV{{myUserLits.level}}</view>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								距离升级还差：<text class="text-green margin-right-xs text-sm">{{myUserLits.next_level_empirical}}</text> 经验
							</view>
						</view>
					</view>
					<view class="action">
						<view class="text-grey cuIcon-right text-xxl"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-list grid col-3 no-border">
			<view class="cu-item" @click="gostudyRecord">
				<view class="cuIcon-timefill text-yellow" >
				</view>
				<text>浏览记录</text>
			</view>
			<view class="cu-item" @click="goMyAttention">
				<view class="cuIcon-profilefill text-cyan" >
				</view>
				<text>我的关注</text>
			</view>
			<view class="cu-item" @click="goMyRank">
				<view class="cuIcon-upstagefill text-red" >
				</view>
				<text>我的排名</text>
			</view>
		</view>
		<view class="cu-bar bg-white solid-bottom margin-top-xl">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 我的成长
			</view>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item">
				<view class="content">
					<view class="text-grey">
						<view class="text-cut margin-left">还差{{myUserLits.next_level_empirical}}经验升为</view>
						<view class="cu-tag round bg-orange sm">LV{{myUserLits.level+1}}</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<view class="cu-tag round bg-green sm" style="margin-left: 0rpx;">LV{{myUserLits.level}}</view>
							<view class="cu-progress round margin-top xs" style="width: 240rpx;">
								<view class="bg-red" :style="{width:myUserLits.empirical_rate+'%'}"></view>
							</view>
							<view class="cu-tag round bg-orange sm">LV{{myUserLits.level+1}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<view class="text-grey">
						<view class="text-cut margin-left">我的积分：</view>
						<view class="cu-tag round bg-blue sm">{{myUserLits.integral}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white solid-bottom margin-top-xl">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 其他设置
			</view>
		</view>
		<view class="cu-list menu sm-border  margin-top'" >
			<!-- <view class="cu-item arrow" @click="goLearnTime">
				<view class="content">
					<text class="cuIcon-discoverfill text-grey"></text>
					<text class="text-grey">学习时长</text>
				</view>
			</view> -->
			<view class="cu-item arrow" @click="goQuestion">
				<view class="content">
					<text class="cuIcon-explorefill text-grey"></text>
					<text class="text-grey">报告问题</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="goDepartmentRank">
				<view class="content">
					<text class="cuIcon-upstagefill text-grey"></text>
					<text class="text-grey">部门排行</text>
				</view>
			</view>
			<view class="cu-item arrow"  @click="goSettings">
				<view class="content">
					<text class="cuIcon-settingsfill text-grey"></text>
					<text class="text-grey">设置</text>
				</view>
			</view>
		</view>
		<view class="padding flex flex-direction" >
			<button class="cu-btn bg-red margin-tb-sm lg" @click="loginOut">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				myUserLits:{}
			}
		},
		onShow() {
			this.getUserInfoData()
		},
		onPullDownRefresh() {
			this.getUserInfoData()
		},
		methods: {
			gotouserinfo(){
				uni.navigateTo({
					url:'changemyinfo'
				})
			},
			gostudyRecord(){
				uni.navigateTo({
					url:'studyrecord'
				})
			},
			goMyAttention(){
				uni.navigateTo({
					url:'myattention'
				})
			},
			goMyRank(){
				uni.navigateTo({
					url:'myrank'
				})
			},
			goLearnTime(){
				uni.navigateTo({
					url:'learntime'
				})
			},
			goDepartmentRank(){
				uni.navigateTo({
					url:'departmentrank'
				})
			},
			goSettings(){
				uni.navigateTo({
					url:'settings'
				})
			},
			async getUserInfoData(){
				let res = await this.$myRuquest({
					url:'/user_info/'
				})
				uni.stopPullDownRefresh();
				this.myUserLits = res.data
			},
			loginOut(){
				uni.clearStorageSync()
				uni.navigateTo({
					url:'../login/login'
				})
			},
			goQuestion(){
				uni.navigateTo({
					url:'../question/question'
				})
			},
		}
	}
</script>

<style lang="scss">
.mine{
	
}
</style>
